<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<head th:include="/base/common_css('test')">
<body>
<div th:include="/base/common_banner"></div>
<!-- Main content starts -->

<div class="content">
    <!-- Sidebar -->
    <div th:include="/base/common_menu"></div>
    <!-- Sidebar
    <div class="sidebar">
        <div class="sidebar-dropdown"><a href="#">Navigation</a></div>

    </div>-->
    <!-- Matter -->
    <div class="mainbar">
        <!-- Page heading -->
        <div th:include="/base/common_pageHeader"></div>

        <div class="matter">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">

                        <div class="widget wgreen">

                            <div class="widget-head">
                                <div class="pull-left">修改用户扩展信息</div>
                                <div class="widget-icons pull-right">
                                    <a href="#" class="wminimize"><i class="icon-chevron-up"></i></a>
                                    <a href="#" class="wclose"><i class="icon-remove"></i></a>
                                </div>
                                <div class="clearfix"></div>
                            </div>

                            <div class="widget-content">
                                <div class="padd">

                                    <!-- Form starts.  -->
                                    <form id="formid" class="form-horizontal" action="#" method="post"
                                          style="align-content: center">
                                        <input type="hidden" id="userId" th:value="${userId}">
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label" >头像</label>
                                            <div class="col-lg-1">
                                                <img th:src="${iconLocal}"
                                                     style="width: 60px;height: 80px;"
                                                     class="icon_url">
                                                <input type="hidden" id="uploadIcon" th:value="${icon}">
                                            </div>
                                            <div class="col-lg-8">
                                                <button class="  btn btn-success pull-left"
                                                        data-toggle="modal"
                                                        data-target="#addCate">选择
                                                </button>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-4 control-label">邮箱</label>
                                            <div class="col-lg-8">
                                            <input  type="text" name="email"
                                                   class="form-control" th:value="${email}"
                                                   id="email" placeholder="邮箱" onclick="checkvalue(1,this);"
                                                   onkeyup="checkvalue(1,this);" title=" 例如 , calrissian@yoxiang.ci">
                                            <label
                                                    id="tip1"
                                                    style="color:#12aeff;font-size:12px"
                                                    class="form-label"></label>
                                                </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="sex" class="col-lg-4 control-label">性别</label>
                                            <div class="col-lg-8">
                                            <select  class="selectpicker show-tick form-control" name="sex" id="sex"
                                                    th:value="${sex}">
                                                <option value="false">女</option>
                                                <option value="true">男</option>
                                            </select>
                                                </div>
                                        </div>
                                        <div class="form-group">
                                            <label  class="col-lg-4 control-label">手机</label>
                                            <div class="col-lg-8">
                                            <input  type="text" name="phone"
                                                   class="form-control" th:value="${phone}"
                                                   id="phone" placeholder="手机">
                                                </div>
                                        </div>

                                    </form>
                                    <div class="modal-footer">
                                        <button type="button" id="saveUpdateUserExt"
                                                class=" btn btn-success ">保存
                                        </button>
                                        <button type="button" id="cancle" class=" btn btn-cancel ">取消
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addCate" tabindex="-1" role="dialog"
     aria-labelledby="addCateLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    上传图片
                </h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" action="/view/uploadIcon" enctype="multipart/form-data"
                      method="post">
                    <div class="form-group">
                        <label class="col-lg-4 control-label">文件上传</label>
                        <div class="col-lg-8">
                            <input id="fileName" type="file" class="form-control pull-right">
                        </div>
                        <button type="button" class="btn btn-success" onclick="IconUpload()">
                            上传
                        </button>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">是否压缩</label>
                        <div class="col-lg-8">
                            <div class="col-lg-8" style="height: 28px">
                                <div class="make-switch" id="isZip" data-on="primary" data-off="info">
                                    <input type="checkbox" checked value="1" data-th-size="small">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                            onclick="close()">确定
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- Mainbar ends -->
    <div class="clearfix"></div>

</div>
<!-- Content ends -->

<div th:include="/base/common_footer"></div>
<!-- Scroll to top -->
<span class="totop"><a href="#"><i class="icon-chevron-up"></i></a></span>
<!--js????-->
<div th:include="/base/common_js"></div>
<script type="text/javascript">

    $("#cancle").click(function () {
        location.href = "/view/user?pageNumber=1&pageSize=10";

    })

    $().ready(function () {
        //给开关加默认值
        $("#isZip").val(1);

    })
    //点击开关改变值
    $('#isZip').on('switch-change', function (e, data) {
        if (data.value == true) {
            $("#isZip").val(1);
        } else {
            $("#isZip").val(0);
        }
    });
    var partten = /^1[3,5,8]\d{9}$/;
    var emailJudge = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
    $("#saveUpdateUserExt").click(function () {
        var email = document.getElementById("email").value
        var phoneNumber = document.getElementById("phone").value;
        var phoneNumber = phoneNumber.trim();
        if (!emailJudge.test(email)) {
            alert("请输入正确的邮箱地址");
            return false;
        } else {
            if (!partten.test(phoneNumber)) {
                alert("请输入正确的手机号");
                return false;
            } else {
                $.ajax({
                    type: "get",
                    url: "/view/updateUserExt",
                    data: {
                        'userId': $('#userId').val(),
                        'icon': $('#uploadIcon').val(),
                        'email': $('#email').val(),
                        'sex': $('#sex').val(),
                        'phone': $('#phone').val(),

                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.data) {
                            window.location.href = "/view/user?pageNumber=1&pageSize=10";
                        }
                    },

                });
            }
        }


    });
    //头像上传
    function IconUpload() {
        $.bootstrapLoading.start({loadingTips: "正在处理数据，请稍候..."});
        var formData = new FormData();
        var files = $('#fileName')[0].files;
        for (var i = 0; i < files.length; i++) {
            formData.append("fileName", $('#fileName')[0].files[i]);
        }
        formData.append("userId", $('#userId').val());


        $.ajax({
            url: "/view/uploadIcon",
            type: "POST",
            data: formData,
            //必须false才会自动加上正确的Content-Type
            contentType: false,
            //必须false才会避开jQuery对 formdata 的默认处理
            //XMLHttpRequest会对 formdata 进行正确的处理
            processData: false,
            success: function (data) {
                if (data.data !== undefined) {
                    $('.icon_url').attr("src", data.data.icon);
                    $('#uploadIcon').val(data.data.iconLocal);
                }

            },
            complete: function () {
                $.bootstrapLoading.end();
            }
        });
    }
    function checkvalue(n, obj) {
        var oTip = document.getElementById("tip" + n);
        if (obj.value == "") {
            oTip.innerHTML = obj.title;
        }
        else {
            oTip.innerHTML = "";
        }
    }
</script>
</body>
</html>